<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h_center_left" :style="{ width: leftFrameInfo.range + 'px' }">
        <div class="h_fold_button" v-if="leftFrameInfo.fold" @click="onLayoutHandel('LeftFold')">⬅️</div>
        <div class="h_fold_button" v-else @click="onLayoutHandel('LeftFold')">➡️</div>
        <div class="h_navigation">

            <!--导航列表-->
            <div class="h_navigation_left" @dblclick="onLayoutHandel('LeftFold')">
                <template v-for="(item, index) in leftNavigation">
                    <div class="h_navigation_button" @click.stop="onLayoutHandel(item)"
                        :class="[item.frameActive ? 'h_active' : '']" v-show="item.labelShow">
                        {{ item.label }}
                    </div>
                </template>
            </div>

            <!--折叠框 -->
            <div class="h_navigation_right" v-if="leftFrameInfo.fold">
                <LeftDraw v-if="onGetLeftFrameActive('LeftDraw')"></LeftDraw>
            </div>
        </div>
    </div>
</template>

<script setup  lang="ts">
/* ================================================================================================ */
// 🍀引入 
/* ================================================================================================ */
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { computed, } from "vue";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
    onLayoutHandel,          // 布局处理器
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🍁 引入组件 ⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

// 🍁  左
import { LeftDraw } from "../LeftDraw";
// import { LeftPelData } from "@/views/svg/LeftPelData";
// import { LeftEquipData } from "@/views/svg/LeftEquipData";
// import { LeftEvent } from "@/views/svg/LeftEvent";
// import { LeftAnimation } from "@/views/svg/LeftAnimation";
// 🍁  中

// 🍁  右

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useProjectStore } from "@/store/projectStore"; // 工程
import { useLayoutStore } from "@/store/layoutStore"; // 布局
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储 👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾👩‍🌾👨‍🌾 
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const projectStore = useProjectStore(); // 工程
const layoutStore = useLayoutStore(); // 布局
const workStore = useWorkStore(); // 设备数据

/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 左框列表*/
let leftNavigation = computed(() => layoutStore.leftNavigation);
/** 左框参数*/
let leftFrameInfo = computed(() => layoutStore.leftFrameInfo);
/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */
/** 获取左框激活状态*/
const onGetLeftFrameActive = (key: string): boolean => {
    // console.log("获取左框激活状态")
    let res = false;
    let leftNavigation = layoutStore.leftNavigation;
    leftNavigation.forEach((element: any) => {
        if (element.key === key) {
            res = Boolean(element.frameActive);
        }
    });
    return res;
};


/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */

</script>

<style lang="scss" scoped>
.h_center_left {
    border-right: 1px solid rgb(100, 100, 100);
    width: 100%;
    height: 100%;
    min-width: 23px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.h_fold_button {
    margin: 0px;
    padding: 0px;
    height: 25px;
    width: 100%;
    text-align: right;
    font-size: 18px;
    border-bottom: 1px solid rgb(100, 100, 100);

    &:hover {
        cursor: pointer; // 小手指
        background-color: rgb(100, 100, 100);
    }
}

// 导航
.h_navigation {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    // 导航左
    .h_navigation_left {
        margin: 0px;
        padding: 0px;
        user-select: none;
        background-color: rgb(0, 0, 0); // 左侧导航按钮

        // 导航按钮
        .h_navigation_button {
            margin-bottom: 3px;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 20px;
            font-size: medium;
            text-align: center;
            background-color: rgb(50, 50, 50);
            border-right: 3px solid rgb(50, 50, 50);
            color: rgb(176, 176, 176);
            cursor: pointer; // 小手指

            &:hover {
                color: rgb(255, 255, 255);
                border-right: 3px solid rgb(0, 0, 255);
            }

            &.h_active {
                background-color: rgb(80, 80, 80);
                color: rgb(255, 255, 255);
                border-right: 3px solid #1d9f00;
            }
        }

        &:hover {
            cursor: pointer; // 小手指
        }
    }

    // 导航右
    .h_navigation_right {
        width: 100%;
        height: 100%;
    }
}
</style>